<template>
	<view class="about-us">
		<div :style="{
				height:`${statusBarHeight}px`,
				background:'#2f9aff'
			}"></div>
		<view :style="{height: `${topHeight}px`,paddingLeft:`${pagePadding}px`,paddingRight:`${pagePadding}px`}">
			<view class="personal-title">
				<i class="clearIcon" @click="goBack"></i>
				<text>关于我们</text>
			</view>
		</view>
		<view class="bannerBox disCenter">
			<image class="bannerImg" src="/static/images/my/img@2x.png" mode=""></image>
			<view class="centerBox disCenter">
				<image class="verImg" :src="versionObj.url" mode=""></image>
				<text>{{versionObj.name}}</text>
				<text>Version{{versionObj.version}}</text>
			</view>
		</view>
		<view class="settings-list">
			<view class="settings-item" @click="btnClick(1)">
				<view>版本更新</view>
				<text class=" icon-right"></text>
			</view>

			<view class="settings-item" @click="btnClick(2)">
				<view>访问官网\n<p class="text">{{dataObj.url}}</p>
				</view>
				<text class="btnText">点击复制</text>
			</view>

			<view class="settings-item" @click="btnClick(3)">
				<view>官网邮箱\n<p class="text">{{dataObj.email}}</p>
				</view>
				<text class="btnText">点击复制</text>
			</view>
			<view class="settings-item" @click="btnClick(4)">
				<view>官方服务热线\n<p class="text">{{dataObj.phone}}</p>
				</view>
				<text class="btnText">拨打网络电话</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	const statusBarHeight = ref(0); // 状态栏高度
	const topHeight = ref(0); // 胶囊高度
	const pagePadding = ref(0);
	const contHeight = ref(0); //内容高度
	const sexIndex = ref(0);
	const rotate = ref(false);
	const versionObj = ref({
		version: 3.5,
		name: "我是版本名称",
		url: "/static/images/my/my_top.png"
	});
	const dataObj = ref({
		url: "https://www.baidu.com/",
		email: "www.jbdjbsjbd@qq.com",
		phone: "10086"
	});
	// 处理页面跳转
	const goBack = (type) => {
		uni.navigateBack()
	};

	// 处理页面跳转
	const btnClick = (n) => {
		if (n == 1) {
			uni.showToast({
				title: "点击了版本更新"
			})
		} else if (n == 2) {
			uni.setClipboardData({
				data: dataObj.value.url,
				success: function() {
					uni.showToast({
						title: "复制成功"
					})
				},
				complete: (e) => {

				}
			});
		} else if (n == 3) {
			uni.setClipboardData({
				data: dataObj.value.email,
				success: function() {
					uni.showToast({
						title: "复制成功"
					})
				},
				complete: (e) => {

				}
			});
		} else if (n == 4) {
			uni.makePhoneCall({
				phoneNumber: dataObj.value.phone
			});
		}
	}

	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight; // 获取状态栏高度

		const res = uni.getMenuButtonBoundingClientRect();
		pagePadding.value = systemInfo.screenWidth - res.right
		topHeight.value = res.height + (res.top - statusBarHeight.value) * 2
		contHeight.value = topHeight.value + statusBarHeight.value
	});

	// 处理消息推送设置
	const handleMessageDelivery = () => {

	};

	// 处理清除缓存
	const handleClearCache = () => {
		uni.showModal({
			title: '提示',
			content: '确定要清除缓存吗？',
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						title: '清除成功',
						icon: 'success'
					})
				}
			}
		})
	};

	// 处理关于我们
	const handleAboutUs = () => {

	};

	// 处理退出登录
	const handleLogout = (n) => {
		if (n == 1) {
			uni.showModal({
				title: '提示',
				content: '是否切换账号？',
				success: (res) => {
					if (res.confirm) {
						// 实现退出登录逻辑
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}
				}
			})
		} else if (n == 2) {
			uni.showModal({
				title: '提示',
				content: '确定要解绑当前绑定手机账号吗？',
				success: (res) => {
					if (res.confirm) {
						// 实现退出登录逻辑
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}
				}
			})
		} else if (n == 3) {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 实现退出登录逻辑
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}
				}
			})
		}

	};
</script>

<style lang="scss" scoped>
	.about-us {
		background: #F2F6F5;
		height: 100vh;
	}

	.personal-title {
		height: 100%;
		font-size: 38rpx;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.clearIcon {
			position: absolute;
			height: 100%;
			width: 60rpx;
			background: url(/static/images/my/ic_fanhui@2x.png)no-repeat center;
			background-size: 35%;
			left: 0;
			top: 0;
		}
	}

	.bannerBox {
		width: 100%;
		height: 400rpx;
		position: relative;

		.bannerImg {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.centerBox {
			width: 100%;
			height: 80%;
			position: absolute;
			flex-direction: column;

			.verImg {
				width: 150rpx;
				height: 150rpx;
			}

			text {
				margin-top: 20rpx;
			}
		}
	}

	.settings-list {
		margin-top: 10px;

		.settings-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 15px;
			height: 50px;
			font-size: 30rpx;
			background-color: #fff;
			border-bottom: 1px solid #eee;
			color: #333;

			.text {
				font-size: 26rpx;
				color: #999;
			}

			.icon-right {
				display: block;
				color: #999;
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
				background: url("/static/images/my/my_jiantou.png")no-repeat center;
				background-size: contain;
				transition: 0.5s;
			}

			.btnText {
				color: rgb(1, 112, 106);
				font-size: 28rpx;
			}
		}

	}

	.disCenter {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>